{% extends "base.html" %}
{% load static %}
{% load gravatar %}
{% load render_kinetics %}



{% block title %}
{% if section != '' %}
RMG Kinetics {{ section|title }}
{% else %}
RMG Kinetics Database
{% endif %}
{% endblock %}

{% block extrahead %}
<style>
table.reaction {
   margin: auto;
}
table.reaction td {
   padding: 10px;
}

table.kineticsEntryData {
    text-align: center;
    margin-bottom: 1em;
}

table.kineticsEntryData td.key {
    font-weight: bold;
    text-align: right;
}

table.kineticsEntryData td.equals {
    text-align: center;
}

table.kineticsEntryData td.value {
    text-align: left;
}

table.kineticsEntryData td.reference p {
    margin: 0px;
}
</style>

<script src="https://code.highcharts.com/6/highcharts.js"></script>
<script src="{% static 'js/highcharts.theme.js' %}" type="text/javascript"></script>

<script type="text/javascript">
{% include "kineticsPlot.js" %}
jQuery(document).ready(
    function() {
        {% if entry %}
            var kseries = [];

            {{ entry.data|get_rate_coefficients:user }}
            {% include "kineticsModel.js" %}

            MathJax.Hub.Queue(
                function() {
                    plotKinetics('plotk', kseries, false);
                }
            );
        {% elif entry_list %}
            var kineticsModelList = [];

            {% for entry, source, reference in entry_list %}
                var kseries = [];
                {{ entry.data|get_rate_coefficients:user }}
                {% if entry.data %}
                {% include "kineticsModel.js" %}
                kineticsModelList.push(kseries[kseries.length-1]);
                {% endif %}
            {% endfor %}

            MathJax.Hub.Queue(
                function() {
                    plotKinetics('plotk', kineticsModelList, false);
                }
            );
        {% endif %}
    }
);
</script>
{% endblock %}

{% block navbar_items %}

{% if section != '' %}
<li><a href="{% url 'database:index' %}">Database</a></li>
<li><a href="{% url 'database:kinetics' %}">Kinetics</a></li>
<li><a href="{% url 'database:kinetics' section=section %}">{{ section|title }}</a></li>
<li><a href="{% url 'database:kinetics' section=section subsection=subsection %}">{{ databaseName }}</a></li>
{% if entry and entry.index and entry.index != -1 %}<li><a href="{% url 'database:kinetics-entry' section=section subsection=subsection index=entry.index %}">{{ entry.index }}. {{ entry.label }}</a></li>{% endif %}
{% if reaction %}<li><a href="">{{ reaction }}</a></li>{% endif %}
{% endif %}


{% endblock %}

{% block sidebar_items %}
{% endblock %}

{% block page_title %}
{% if entry and entry.index and entry.index != -1%}
{{ entry.index }}. {{ entry.label }}
{% else %}
{{ databaseName }}
{% endif %}



{% endblock %}

{% block page_body %}

{% if structure %}
<h2>Group</h2>
<table>
    <tr>
        <td>{{ structure|safe }}</td>
    </tr>
</table>
{% else %}
<h2>Reaction</h2>
<table class="reaction">
    <tr>
        <td class="reactants">{{ reactants|safe }}</td>
        <td class="reactionArrow">{{ arrow|safe }}</td>
        <td class="products">{{ products|safe }}</td>
    </tr>
    {% if entry and reaction.degeneracy %}
    <tr><td>Degeneracy = {{reaction.degeneracy}}</td></tr>
    {% endif %}
</table>
{% if reactionUrl != '' %}
<p><a href="{{ reactionUrl }}">Search other kinetics sources for this reaction.</a></p>
{% endif %}
{% endif %}
<br/>

<h2>Kinetic Data</h2>

{% if entry %}
    {{ entry.data|render_kinetics_math:user }}

    <h2>Reference</h2>
    {% include "reference.html" %}

    <div id="plotk" style="width: 500px; height: 300px; margin: auto;"></div>

{% elif entry_list %}
    <p>
    Multiple reaction template matches were identified for this reaction.
    This is typically as result of multiple transition states leading to the same product or multiple resonance structures.
    </p>

    {% for entry, source, reference in entry_list %}

    <h3>Template #{{ entry.result }}: {{ source }}</h3>
    {{ entry.data|render_kinetics_math:user }}

    {% include "reference.html" %}

    {% endfor %}

    <div id="plotk" style="width: {{ plotWidth }}px; height: {{ plotHeight }}px; margin: auto;"></div>

{% endif %}


{% if entry and entry.index and entry.index != -1 %}

<h2>Update database</h2>
If you noticed a mistake or have better data, then edit this entry here:
    <a href="{% url 'database:kinetics-entry-edit' section=section subsection=subsection index=entry.index %}">
        <button type="button">Edit entry</button>
    </a>.

{% if user.is_authenticated %}
You are logged in as {{ user.get_full_name }}</a> 
{% else %}
You must <a href="{% url 'login' %}?next={{ request.path }}">log in first.</a>
{% endif %}

{% endif %}

{% endblock %}
